<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeAtlas - 技术图谱</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">CodeAtlas</h1>
                <p class="hero-subtitle">探索、学习、分享技术实现的乐园</p>
                <div>
                    <a href="#features" class="cta-button">
                        <i class="fas fa-rocket"></i> 开始探索
                    </a>
                    <a href="https://github.com/yourusername/code-atlas" class="cta-button secondary-button">
                        <i class="fab fa-github"></i> GitHub
                    </a>
                </div>
            </div>
            <img src="illustration.svg" alt="技术探索" class="illustration">
        </div>
    </section>

    <!-- Features -->
    <section class="features" id="features">
        <div class="container">
            <h2 class="section-title">为什么选择 CodeAtlas？</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <i class="fas fa-sitemap feature-icon"></i>
                    <h3>结构化学习</h3>
                    <p>清晰的知识体系，帮助你系统地掌握技术要点。每个实现都经过精心组织，让学习更有条理。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-laptop-code feature-icon"></i>
                    <h3>实战驱动</h3>
                    <p>通过真实的技术实现案例，直接体验实战开发。每个示例都是经过验证的最佳实践。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-users feature-icon"></i>
                    <h3>社区共创</h3>
                    <p>加入充满活力的开发者社区，分享经验，互相学习。你的每一份贡献都让社区更加丰富。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories -->
    <section class="categories">
        <div class="container">
            <h2 class="section-title">探索技术领域</h2>
            <div class="category-grid">
                <div class="category-card">
                    <img src="../icons/unity-icon.svg" alt="Unity" class="category-icon">
                    <h3>Unity开发</h3>
                    <p>探索游戏开发的无限可能，从基础组件到高级功能，一应俱全。</p>
                </div>
                <div class="category-card">
                    <img src="../icons/render-icon.svg" alt="渲染" class="category-icon">
                    <h3>图形渲染</h3>
                    <p>深入理解现代图形渲染技术，创造惊艳的视觉效果。</p>
                </div>
                <div class="category-card">
                    <img src="../icons/web-icon.svg" alt="Web" class="category-icon">
                    <h3>Web技术</h3>
                    <p>掌握前沿的Web开发技术，构建下一代互联网应用。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats -->
    <section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number" data-value="100">0</div>
                    <div>技术实现</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" data-value="6">0</div>
                    <div>技术领域</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" data-value="1000">0</div>
                    <div>开发者</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p>CodeAtlas - 你的技术实现导航图</p>
            <p style="color: var(--primary);">Made with ❤️ by the developer community</p>
        </div>
    </footer>

    <script>
        // 数字增长动画
        const animateValue = (element, start, end, duration) => {
            const range = end - start;
            let current = start;
            const increment = end > start ? 1 : -1;
            const stepTime = Math.abs(Math.floor(duration / range));
            const timer = setInterval(() => {
                current += increment;
                element.textContent = current + (end > 100 ? '+' : '');
                if (current === end) {
                    clearInterval(timer);
                }
            }, stepTime);
        };

        // 监听元素进入视图
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = parseInt(entry.target.dataset.value);
                    animateValue(entry.target, 0, target, 2000);
                    observer.unobserve(entry.target);
                }
            });
        });

        document.querySelectorAll('.stat-number').forEach(stat => {
            observer.observe(stat);
        });
    </script>
</body>
</html>
